<template>
  <div>
    detail
    <van-button @click="$router.push('/layout/readHome')" type="primary">
      跳转回去
    </van-button>
    <template v-for="item in detailItemArr">
      <ul :key="item.id">
        <li>
          {{ item.id }}
          <image-view :src="item.img"></image-view>
        </li>
        <li>{{ item.bookName }}</li>
        <li>{{ item.bookPrice }}</li>
      </ul>
    </template>
    <!-- 点评区域 -->
    <template>
      <div class="comment-wrapper">
        <!-- 带上这本书的id -->
        <van-button @click="$router.push(`/addComments/${$route.params.id}`)">
          {{ '点评此书' }}
        </van-button>
        <van-button>
          {{ '标记阅读状态' }}
        </van-button>
      </div>
    </template>
    <!-- 渲染 点评内容区域 -->
    <template v-for="item in commentsArr">
      <template v-if="$route.params.id === item.idCard">
        <CommentsCard :key="item.id" :item="item"></CommentsCard>
      </template>
    </template>

    <!-- 加入书架区域 -->
    <template v-if="detailItemArr.length">
      <van-button type="info" @click="handleToBookRack">
        {{ !detailItemArr[0].isBookRack ? '加入书架' : '已经加入书架' }}
      </van-button>
    </template>
  </div>
</template>

<script>
import { mapMutations, mapState, mapActions } from 'vuex'
import CommentsCard from '../components/CommentsCard.vue'
import { debounce } from 'lodash'
export default {
  components: { CommentsCard },
  name: 'detail',
  computed: {
    ...mapState(['detailItemArr', 'commentsArr']),
  },
  // // keep-alive 之后，页面缓存，created生命周期只会走一次
  // created() {
  //   this.SET_DETAIL_ITEM(this.$route.params.id)
  // },
  activated() {
    this.SET_DETAIL_ITEM(this.$route.params.id)
  },
  methods: {
    ...mapMutations(['TO_BOOK_RACK', 'SET_DETAIL_ITEM']),
    // 改成防抖截流的 function ->
    handleToBookRack() {
      this.TO_BOOK_RACK(this.$route.params.id)
    },
  },
}
</script>

<style lang="scss" scoped>
.comment-wrapper {
  display: flex;
  padding: 5px;
  margin: 5px;
  .van-button {
    flex: 1;
    margin: 5px;
    background: #eee;
  }
}
</style>
